<template>
  <view v-if="!isLoading" class="bg-w">
    <view class="container" v-if="!store_id">
      <view class="linear-bg" :style="'padding-top:'+($xyfun.xysys().buttonBound.top)+'px;'">
        <view class="navBarTit" :style="'height:'+($xyfun.xysys().buttonBound.height)+'px;'">
          <text>{{ common.appConfig.name }}</text>
        </view>
        <view class="local" @tap="chooseUserLocation">
          <text class="yz-iconfont yz-dingwei"></text>
          {{ addr !== '' ? $xyfun.locCity(addr) : '定位' }}
        </view>
      </view>

      <view class="header">
        <view class="search-input-wrap">
          <view class="yz-iconfont yz-sousuo"></view>
          <input class="search-input" placeholder="请输入您搜索的内容" v-model="keyword"/>
          <view class="search-button" @click="search">搜索</view>
        </view>
        <swiper v-if="banner.length>0" class="banner">
          <swiper-item v-for="item in banner">
            <image :src="$xyfun.image(item.image)"></image>
          </swiper-item>
        </swiper>
      </view>

      <view class="service">
        <view class="item" v-for="item in service">
          <image :src="$xyfun.image(item.image)"></image>
          <view>{{item.name}}</view>
        </view>
      </view>

      <view class="categories" :style="'background-image:url('+ $xyfun.image('/static/cate_bg.png') +')'">
        <view v-for="(item, index) in categories" :key="index" class="category-item"
              @click="$xyfun.to('/pages/shop?cid='+item.id)">
          <image class="category-image" :src="$xyfun.image(item.image)"/>
          <text class="category-name">{{ item.name }}</text>
        </view>
        <view class="category-item" @click="$xyfun.to('/pages/shop')">
          <image class="category-image" :src="$xyfun.image('/static/kaka/index/index-fenlei/8.png')"/>
          <text class="category-name">查看全部</text>
        </view>
      </view>

      <view class="recmd_box" v-if="goods_list.length>0">
        <view class="recmd_tit">为你推荐</view>
        <view class="recmd_bg" :style="'background-image:url('+ $xyfun.image('/static/background2.png') +')'"></view>
        <view class="recmd_goods">
          <xy-goods-row2 v-for="(item, index) in goods_list" :item="item" @addCart="addCart"/>
        </view>
      </view>
    </view>



    <xy-store :store_id="store_id" v-if="store_id!==''" @addCart="addCart"></xy-store>


    <!-- 规格弹窗 -->
    <xy-goods-sku
        v-if="showSku && goods.id"
        v-model="showSku"
        :goodsInfo="goods"
        :buyType="buyType"
        :goodsType="goodsType"
        DefaultBuyNum="1"
        @changeType="changeType"
        @getSkuText="getSkuText"
    />
    <cart-num-view/>

    <xy-tabbar />


  </view>
</template>
<script>
import { mapState,mapActions } from 'vuex';
import XyTabbar from "@/components/xy-tabbar/index.vue";
import xyTitle from "@/components/xy-title/index.vue";
import xyStore from "@/components/xy-store/index.vue";
import xyGoodsSku from "@/components/xy-goods/sku.vue";
import xyGoodsRow2 from "@/components/xy-goods/row2.vue";
import Cart_num_view from "@/components/xy-goods/cart_num_view.vue";
import CartNumView from "@/components/xy-goods/cart_num_view.vue";
export default {
  components: {CartNumView, xyGoodsSku, xyTitle, XyTabbar, xyStore, xyGoodsRow2},
  data() {
    return {
      isLoading: true,

      store_id : '',

      lat : 0,
      lng : 0,
      addr : '',

      keyword: '',

      banner: [],
      service : [],
      categories: [],
      goods_list: [],

      goods:{},
      showSku:false,
      buyType: 'sku',
      goodsType: 'goods',
      currentSkuText:'',
      showShare:false

    }
  },
  computed: {
    ...mapState(['common','user','cart'])
  },
  async onLoad(options) {
    console.log(options);
    if(options?.store_id){
      uni.setStorageSync('store_id',options.store_id);
      this.store_id = options.store_id;
    }
    if(uni.getStorageSync('store_id')){
      this.store_id = uni.getStorageSync('store_id');
    }
    if(this.store_id == ''){
      this.loadData();
    }else{
      this.isLoading = false;
    }
  },
  onShow(){
    if(uni.getStorageSync('addr')){
      this.addr = uni.getStorageSync('addr');
    }
    if(uni.getStorageSync('lat')){
      this.lat = uni.getStorageSync('lat');
    }
    if(uni.getStorageSync('lng')){
      this.lng = uni.getStorageSync('lng');
      this.loadData();
    }else{
      if(this.isLoading){
        this.loadData();
      }
    }
  },
  methods: {
    ...mapActions('cart',{'addCartGoods':'addGoods'}),
    async loadData() {

      this.$api.post({
        url: '/index/home',
        loadingTip:'加载中...',
        data: {
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.banner = res.banner;
          this.service = res.service;
          this.goods_list = res.goods_list;
          this.categories = res.cates;
        }
      });
    },

    chooseUserLocation(){
      var that = this;
      uni.chooseLocation({
        success: res => {
          that.addr = res.address + res.name;
          that.lat = res.latitude;
          that.lng = res.longitude;
          uni.setStorageSync('addr',res.address + res.name)
          uni.setStorageSync('lat',res.latitude)
          uni.setStorageSync('lng',res.longitude)
        },
        fail: err => {

        }
      });

    },

    //商品搜索
    search(){
      if(!this.keyword){
        this.$xyfun.msg('请输入关键词');
        return;
      }
      this.$xyfun.to('/pages/shop/lists?keyword='+this.keyword);
    },

    // 加入购物车
    addCart(item) {
      if (this.user.isLogin) {
        this.goods = item;
        this.buyType = 'cart';
        this.showSku = true;
      } else {
        this.$xyfun.toLogin();
      }
    },

    // 组件返回的type;
    changeType(e) {
      this.buyType = e;
      this.buyType = 'cart';
      this.showSku = true;
    },

    // 组件返回的规格;
    getSkuText(e) {
      this.currentSkuText = e;
    },

  }
}
</script>
<style>
page{
  background: #fff;
  height: 100vh;
}
</style>
<style scoped lang="scss">
.container {
  padding: 0 25rpx 40rpx 25rpx;
  background: linear-gradient(to bottom,#f7d3c5,#fff,#fff,#fff);
  overflow: hidden;
}

.linear-bg{
  position: relative !important;
  .navBarTit{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    font-weight: bold;
    padding-left: 40rpx;
    color: #000;
  }
  .local{
    margin-top: -50rpx;
    margin-left: 20rpx;
    font-size: 28rpx;
    font-weight: bold;
    z-index: 111;
    width: 220rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text{
      margin-right: 10rpx;
      font-size: 32rpx;
      color: #e01010;
    }
  }
}

.header{
  width: 100%;
  position: relative;
  margin-top: 30rpx;
}

.banner {
  width: 100%;
  margin-top: 20rpx;
  height: 220rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  image{
    width: 100%;
    height: 220rpx;
  }
}

.service {
  display: flex;
  justify-content: space-around;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
  .item {
    display: flex;
    align-items: center;
    image{
      width: 30rpx;
      height: 30rpx;
    }
    view{
      font-size: 22rpx;
      color: #999;
    }
  }
}


.categories {
  position: relative;
  z-index: 1;
  background-repeat: no-repeat;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 40rpx;
  background-size: 100%  100%;

  .category-item {
    width: 25%;
    box-sizing: border-box;
    padding: 10rpx;
    text-align: center;
    .category-image {
      border-radius: 110rpx;
      width: 100rpx;
      height: 100rpx;
      background-color: #eee;
      margin: 0 auto 10rpx;
      display: block;
    }

    .category-name {
      font-size: 24rpx;
      color: #333;
      word-break: break-all;
    }
  }
}

.recmd_box {
  background-color: transparent;
  width: 100%;
  position: relative;
  margin-top: 40rpx;
  padding-top: 40rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 5rpx 5rpx 10rpx #999999;
  .recmd_tit {
    position: relative;
    z-index: 1;
    font-size: 34rpx;
    font-weight: 600;
    margin-bottom: 60rpx;
    padding-left: 10%;
  }
  .recmd_bg{
    position: absolute;
    top: 0;
    width: 100%;
    height: 400rpx;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .recmd_goods {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 90%;

  }
}


</style>
